<template>
  <div class="Classification">
    <div class="main">
      <div style="margin-top:20px;display: flex;align-items: center;">
        <span class="span">语种:</span>
        <div style="margin-left: 30px;" class="languages">
          <span @click="getlanguagesarr(item,index)" style="" :class="item==languages?'p':''" v-for="(item,index) in languagesarr" :key="index">{{item}}</span>
        </div>
      </div>
      <div style="margin-top:20px;display: flex;align-items: center;">
        <span class="span">分类:</span>
        <div style="margin-left: 30px;" class="languages">
          <span @click="getclassify(item1,index1)" style="" :class="item1==classify?'p':''" v-for="(item1,index1) in classifyarr" :key="index1">{{item1}}</span>
        </div>
      </div>
      <div style="display: flex;align-items: center;">
        <span class="span">筛选:</span>
        <div class="languages" style="margin-top: 43px; margin-left: 30px;background-color: aquamarine;width: 0px;display: flex; display: grid;grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;">
          <span v-for="(item2,index2) in siftarr" :key="index2" @click="getsift(item2,index2)" style="font-size:11px;margin-right: 40px; margin-bottom: 10px;" :class="item2==sift?'p':''">{{item2}}</span>
        </div>
      </div>
      <div class="imglist">
        <div style="margin-bottom:30px;" v-for="item in artists" :key="item.id" class="s" @click="getSingerdetails(item.id,item.name)">
          <img :src="item.img1v1Url" alt="#">
          <p>{{item.name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Classification',
  data() {
    return {
      languages: '全部',
      languagesarr: ['全部', '华语', '欧美', '日本', '韩国', '其他'],
      classify: '全部',
      classifyarr: ['全部', '男歌手', '女歌手', '乐队组合'],
      sift: '热门',
      siftarr: ['热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'],
      limit: 60,
      type: -1,
      area: -1,
      initial: -1
    }
  },
  mounted() {
    this.$store.dispatch('getSingerclassificationList', { limit: this.limit, type: this.type, area: this.area, initial: this.initial })
  },
  computed: {
    ...mapState({
      artists: state => state.Singger.artists
    })
  },
  methods: {
    getlanguagesarr(e, v) {
      if (v == 0) {
        this.area = -1
        this.$store.dispatch('getSingerclassificationList', { limit: this.limit, type: this.type, area: this.area, initial: this.initial })
      } else if (v == 1) {
        this.area = 7
        this.$store.dispatch('getSingerclassificationList', { limit: this.limit, type: this.type, area: this.area, initial: this.initial })
      } else if (v == 2) {
        this.area = 96
        this.$store.dispatch('getSingerclassificationList', { limit: this.limit, type: this.type, area: this.area, initial: this.initial })
      } else if (v == 3) {
        this.area = 8
        this.$store.dispatch('getSingerclassificationList', { limit: this.limit, type: this.type, area: this.area, initial: this.initial })
      } else if (v == 4) {
        this.area = 16
        this.$store.dispatch('getSingerclassificationList', { limit: this.limit, type: this.type, area: this.area, initial: this.initial })
      } else if (v == 5) {
        this.area = 0
        this.$store.dispatch('getSingerclassificationList', { limit: this.limit, type: this.type, area: this.area, initial: this.initial })
      }
      this.languages = e
    },
    getclassify(e, v) {
      if (v == 0) {
        this.type = -1
        this.$store.dispatch('getSingerclassificationList', { limit: this.limit, type: this.type, area: this.area, initial: this.initial })
      } else if (v == 1) {
        this.type = 1
        this.$store.dispatch('getSingerclassificationList', { limit: this.limit, type: this.type, area: this.area, initial: this.initial })
      } else if (v == 2) {
        this.type = 2
        this.$store.dispatch('getSingerclassificationList', { limit: this.limit, type: this.type, area: this.area, initial: this.initial })
      } else if (v == 3) {
        this.type = 3
        this.$store.dispatch('getSingerclassificationList', { limit: this.limit, type: this.type, area: this.area, initial: this.initial })
      }
      this.classify = e
    },
    getsift(e, v) {
      if (v == 0) {
        this.initial = -1
        this.$store.dispatch('getSingerclassificationList', { limit: this.limit, type: this.type, area: this.area, initial: this.initial })
      } else if (v == 27) {
        this.initial = 0
        this.$store.dispatch('getSingerclassificationList', { limit: this.limit, type: this.type, area: this.area, initial: this.initial })
      } else {
        this.initial = e.toLowerCase()
        this.$store.dispatch('getSingerclassificationList', { limit: this.limit, type: this.type, area: this.area, initial: this.initial })
      }
      this.sift = e
    },
    //获取歌手id进入到歌手详情页\
    getSingerdetails(e, v) {
      this.$router.push({ path: '/home/Singerdetails', query: { id: e, name: v } })
    }
  }
}
</script>

<style lang="less" scoped>
.Classification {
  margin-top: 80px;
  .main {
    width: 1100px;
    .span {
      font-size: 12px;
    }
    .p {
      color: red;
      padding: 2px 10px;
      border-radius: 10px;
      background-color: rgb(250, 219, 220);
    }
    .languages {
      span {
        font-size: 12px;
        margin-right: 40px;
        opacity: 0.6;
      }
      span:hover {
        cursor: pointer;
        opacity: 1;
      }
    }
    .imglist {
      margin-top: 20px;
      display: flex;
      display: grid;
      grid-template-columns: auto auto auto auto auto auto;
      .s {
        img {
          width: 170px;
          height: 170px;
          border-radius: 5px;
        }
        img:hover {
          cursor: pointer;
        }
        p {
          opacity: 0.6;
        }
        p:hover {
          cursor: pointer;
          opacity: 1;
        }
      }
    }
  }
}
</style>